<template>
    <div id="warp">
      <div id="warp-lfet">
        <div id="nav-warp">
          <a id="meunBtn" class="iconfont icon-lanmu" @click="openMenu()"></a>
          <div class="user">
            <div class="avatar"><i class="iconfont icon-2"></i> </div>
            <div class="name">CallMeSoul</div>
          </div>
          <div class="nav" id="nav"  v-bind:class="{ phoneMen: phoneMenu }">
            <ul>
              <template v-for="item in $router.options.routes">
                <li v-if="item.hidden==false">
                  <a @click="toMenuFun(item.path)" >{{item.meta.title}}</a>
                  <!--<a :to="item.path" :href="item.path+'#meunBtn'">{{item.meta.title}}</a>-->
                </li>
              </template>
            </ul>
          </div>
        </div>
      </div>
      <div id="warp-right">
        <router-view></router-view>
      </div>
      <div class="page-loading" v-if="$store.state.auth.loading">
        <div class="page-loading-cont">
          <svg
            t="1495294505948"
            class="icon"
            style=""
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="783"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="100" height="100">
            <defs>
              <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="100%" style="stop-color:#000000;stop-opacity:1" />
                <stop offset="0%" style="stop-color:#aaaaaa;stop-opacity:1" />
                <animate attributeName="y2" dur="1500ms" from="0%" to="100%" repeatCount="indefinite" />
              </linearGradient>
            </defs>
            <path fill="url(#grad1)" d="M836.738036 245.551532c0 0-107.22407-107.223047-262.875083-107.857497-155.861814-0.633427-70.843488-1.693572-509.881756-39.33589l158.399613 240.664222c0 0-87.762833 136.198985-33.411971 309.612547 54.351885 173.414585 203.656353 237.495042 203.656353 237.495042s107.857497 62.808488 258.643712 31.084972c150.782122-31.723515 238.971673-145.922441 273.443789-224.805022C959.183785 613.531418 1008.881674 424.676166 836.738036 245.551532L836.738036 245.551532zM563.079352 525.553691c17.974373 0 32.56672 5.2864 32.56672 11.843746 0 6.55223-14.592346 11.843746-32.56672 11.843746-17.975397 0-32.567743-5.290493-32.567743-11.843746C530.511609 530.856463 545.091676 525.553691 563.079352 525.553691L563.079352 525.553691zM256.219499 420.444794c0 0 116.315122 69.791529 217.826074 81.420381 0 0-38.064944 123.08327-169.187307 54.989405C304.858266 556.854581 249.872954 521.955746 256.219499 420.444794L256.219499 420.444794zM837.794088 733.861994l-139.575896-46.948265 0 174.896332L566.038754 713.771423 436.614056 861.809037l0-0.2415-0.211824 0.2415L436.402231 686.981267l-139.369188 45.397956 0.138146-0.323365-0.349971 0.112564 42.296315-101.510952 12.266371 4.863774-29.995151 74.991971 128.757502-44.958958 0 0.284479 0.211824-0.072655-1.056052 160.901597 118.007671-134.681422 55.082526 62.71332 62.498426 70.917166-0.633427-158.37403 0.210801 0.073678 0-0.073678 128.331807 42.847877-33.373085-73.510224 14.377452-5.919826 0.10847 0.249687 0.103354-0.038886 43.759643 102.941534L837.794088 733.861994 837.794088 733.861994 837.794088 733.861994zM787.040147 572.712757c0 0-85.651752 28.125571-131.122363-71.481008 0 0 57.103556 0 218.463594-78.246085C874.381377 422.982594 890.240577 549.453007 787.040147 572.712757L787.040147 572.712757zM787.040147 572.712757" p-id="784"></path>
          </svg>
          <div class="title">Loading.....</div>
        </div>
      </div>
    </div>

</template>

<script>
  import Api from "./api"
  import ArticleLsit from './components/article/List.vue'
export default {
      data(){
        return{
            menus:[],
          phoneMenu:false
        }
      },
    methods:{
      toMenuFun:function (path) {
         let winWidth = "";
        if (window.innerWidth){
          winWidth = window.innerWidth;
        }
        else if ((document.body) && (document.body.clientWidth)){
          winWidth = document.body.clientWidth;
        }
        if(winWidth<850){
            this.$router.push(path);
            this.phoneMenu=false;
        }else {
          this.$router.push(path);
        }

      },
      openMenu:function () {
        this.phoneMenu=true;
      }
    },
    mounted(){

    }
}
</script>

<style>
@import "./assets/style/layout.css";

</style>
